﻿@page "/localization"

<div class="d-md-flex flex-md-row-reverse align-items-center justify-content-between">
    <a class="btn btn-sm btn-bd-light my-2 my-md-0" href="https://github.com/jdtcn/BlazorDateRangePicker/blob/master/Demo.Shared/Pages/Localization.razor"
       title="View this file on GitHub" target="_blank" rel="noopener">View on GitHub</a>
    <h3>Localization</h3>
</div>

<p>
    Use
    <code class="language-plaintext highlighter-rouge">ApplyLabel</code>,
    <code class="language-plaintext highlighter-rouge">CancelLabel</code> and
    <code class="language-plaintext highlighter-rouge">CustomRangeLabel</code>
    to change picker labels. Alternatively one can use custom
    <code class="language-plaintext highlighter-rouge">ButtonsTemplate</code>.
</p>

<p>
    Use
    <code class="language-plaintext highlighter-rouge">Culture</code>
    property to set picker culture other than CurrentUICulture.
</p>

<Example Text="@ExampleText">
    <DateRangePicker Culture="@(System.Globalization.CultureInfo.GetCultureInfo("fr-FR"))"
                     ApplyLabel="Appliquer"
                     CancelLabel="Annuler"
                     CustomRangeLabel="Ma gamme personnalisée" />
</Example>

<p>It's convenient to set these properties application-wide in one place:</p>

<Example Text="@ExampleConfig" />

@code {
    private string ExampleText =
        "<DateRangePicker Culture=\"@(System.Globalization.CultureInfo.GetCultureInfo(\"fr-FR\"))\">\n" +
        "                 ApplyLabel=\"Appliquer\"\n" +
        "                 CancelLabel=\"Annuler\"\n" +
        "                 CustomRangeLabel=\"Ma gamme personnalisée\" />";

    private string ExampleConfig =
        "#Startup.cs\n\n" +
        "using BlazorDateRangePicker;\n\n" +
        "//ConfigureServices\n" +
        "services.AddDateRangePicker(config =>\n" +
        "{\n" +
        "    config.ApplyLabel = \"My Apply Label\";\n" +
        "    ...\n" +
        "});";
}